<template>
  <edit-dialog
    :centerDialogVisible="visible"
    :tilte="tilte"
    @Cancel="handleCancel"
    :default-button="false"
    :width="width"
  >
    <template #content>
      <el-table :data="thresholdData" :pagination="false" height="200px" @row-click="hiddenMe">
        <template v-for="(item,colIndex) in thresholdListColumns" :key="colIndex">
          <el-table-column :label="item.label" :prop="item.prop" :width="item.width" align="center">
            <template #default="scope">
              <el-input-number
                v-if="isEdit && scope.$index === rowInd && scope.cellIndex === colInd"
                v-model="scope.row[item.prop]"
                size="small"
                style="width: 80px"
                controls-position="right"
                @click.stop
              />
              <el-select
                v-else-if="isSelect && scope.$index === rowInd && scope.cellIndex === colInd"
                v-model="scope.row[item.prop]"
                size="small"
              >
                <el-option key="1" label="是" value="是" />
                <el-option key="2" label="否" value="否" />
              </el-select>
              <div v-else @click="cellClick(scope)" style="width: 50px; height: 24px">{{scope.row[item.prop]}}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
        <el-button class="buttonOk" type="primary" @click="handleOk">保存</el-button>
      </span>
    </template>
  </edit-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, defineEmits, computed } from 'vue'
import editDialog from '@/components/editDialog/index.vue'
import { thresholdListColumns } from '@/views/eqpt/device/config/columns'
const tilte = ref('设置数量阈值')
const emit = defineEmits(['cancel', 'ok'])
const width = ref('500px')
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const isEdit = ref(false)
const isSelect = ref(false)
const rowInd = ref(0)
const colInd = ref(0)

const thresholdData = ref([
  {
    id: '1',
    area: '区域A',
    historicalAverage: '13',
    isAlarm: '否',
    setThreshold: '/'
  },
  {
    id: '2',
    area: '区域B',
    historicalAverage: '30',
    isAlarm: '是',
    setThreshold: '13'
  },
  {
    id: '3',
    area: '区域C',
    historicalAverage: '23',
    isAlarm: '否',
    setThreshold: '22'
  },
  {
    id: '4',
    area: '区域D',
    historicalAverage: '15',
    isAlarm: '是',
    setThreshold: ''
  },
  {
    id: '5',
    area: '区域E',
    historicalAverage: '27',
    isAlarm: '否',
    setThreshold: ''
  },
  {
    id: '6',
    area: '区域F',
    historicalAverage: '18',
    isAlarm: '是',
    setThreshold: ''
  }
])

/**
 * 取消
 */
const handleCancel = () => {
  emit('cancel')
}
const handleOk = () => {
  emit('ok')
}

// 单击 出现输入框
const cellClick = (val: any) => {
  if (val.column.property === 'setThreshold') {
    isEdit.value = true
    isSelect.value = false
    rowInd.value = val.$index
    colInd.value = val.cellIndex
  } else if (val.column.property === 'isAlarm') {
    isSelect.value = true
    isEdit.value = false
    rowInd.value = val.$index
    colInd.value = val.cellIndex
  }
}

const hiddenMe = (row, column, event) => {
  if (column != undefined) {
    isEdit.value = false
    isSelect.value = false
  }
}
</script>
